<template>
  <div class="change">
    <el-container>
      <!--      <el-header>变更申请</el-header>-->
      <el-main>
        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-1">
          <el-form-item label="所属合同" prop="bgContract">
            <el-select
              disabled
              v-model="ruleForm.bgContract"
              :placeholder="contractName"
              style="width: 450px">
              <el-option v-for="item in contact_data" :key="item.id" :value="item.name" :label="item.name"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属项目" prop="bgProject">
            <el-select
              disabled
              v-model="ruleForm.bgProject"
              :placeholder="projectName"
              style="width: 300px;">
             <el-option v-for="item in project_data" :key="item.id" :value="item.name" :label="item.name"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="期数" prop="stageNum">
            <el-select v-model="ruleForm.stageNum" placeholder="请选择" style="width: 100px">
              <el-option label="第一期" value="第一期"></el-option>
              <el-option label="第二期" value="第二期"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-2">
          <el-form-item label="需求来源" prop="demandSource">
            <el-select v-model="ruleForm.demandSource"
                       placeholder="请选择"
                       style="width: 450px">
              <el-option label="市场" value="市场"></el-option>
              <el-option label="客户" value="客户"></el-option>
              <el-option label="用户" value="用户"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源备注">
            <label slot="label">&nbsp;&nbsp;&nbsp;来源备注</label>
            <el-input v-model="ruleForm.sourceRemark" style="width: 450px"></el-input>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-3">
          <el-form-item label="优先级" prop="privilege">
            <el-select v-model="ruleForm.privilege"
                       placeholder="请选择"
                       style="width: 450px;">
              <el-option label="紧急重要" value="紧急重要"></el-option>
              <el-option label="重要不紧急" value="重要不紧急"></el-option>
              <el-option label="紧急不重要" value="紧急不重要"></el-option>
              <el-option label="不重要不紧急" value="不重要不紧急"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-4">
          <el-form-item label="需求名称">
            <label slot="label">&nbsp;&nbsp;&nbsp;需求名称</label>
            <el-input
              disabled
              v-model="ruleForm.demandName"
              :placeholder="demandName"
              style="width: 450px"></el-input>
          </el-form-item>
          <el-form-item label="计划工时" prop="planTime">
            <label slot="label">&nbsp;&nbsp;&nbsp;计划工时</label>
            <el-input v-model.number="ruleForm.planTime" style="width: 450px"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" class="upload-demo">
          <el-form-item label="附件">
            <label slot="label">&nbsp;&nbsp;&nbsp;附件</label>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed">
              <el-button size="small">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="不超过50M" class=""></el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-5">
          <el-form-item label="影响范围" prop="choice">
            <label slot="label">&nbsp;&nbsp;&nbsp;影响范围</label>
            <el-radio-group v-model="ruleForm.choice" style="margin-bottom: 30px;">
              <el-radio-button label="1">需求</el-radio-button>
              <el-radio-button label="2">验收</el-radio-button>
              <el-radio-button label="3">合同</el-radio-button>
              <el-radio-button label="4">沟通</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-6">
          <el-form-item label="具体影响" prop="effect">
            <label slot="label">&nbsp;&nbsp;&nbsp;具体影响</label>
            <el-radio-group v-model="ruleForm.contractAffected" v-if="ruleForm.choice == '1'">
              <el-radio :label="1">需求增加</el-radio>
              <el-radio :label="2">需求减少</el-radio>
            </el-radio-group>

            <el-radio-group v-model="ruleForm.contractAffected" v-if="ruleForm.choice == '2'">
              <el-radio :label="3">影响验收</el-radio>
              <el-radio :label="4">不影响验收</el-radio>
            </el-radio-group>

            <el-radio-group v-model="ruleForm.contractAffected" v-if="ruleForm.choice == '3'">
              <el-radio :label="5">影响合同</el-radio>
              <el-radio :label="6">不影响合同</el-radio>
            </el-radio-group>

            <el-radio-group v-model="ruleForm.contractAffected" v-if="ruleForm.choice == '4'">
              <el-radio :label="7">已充分沟通</el-radio>
              <el-radio :label="8">未充分沟通</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-7">
          <el-form-item label="评审组" prop="PR">
            <label slot="label">&nbsp;&nbsp;&nbsp;评审组</label>
            <el-select v-model="ruleForm.PR" disabled placeholder="请选择" style="width: 700px;">
              <el-option label="一" value="一"></el-option>
              <el-option label="二" value="二"></el-option>
            </el-select>
          </el-form-item>

          <el-checkbox>需要评审</el-checkbox>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-8">
          <el-form-item label="抄送组" prop="copy">
            <label slot="label">&nbsp;&nbsp;&nbsp;抄送组</label>
            <el-select v-model="ruleForm.copyGroup" placeholder="请选择" style="width: 980px;">
              <el-option label="一" value="一"></el-option>
              <el-option label="二" value="二"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-9">
          <el-form-item label="需求描述" prop="demandDescription">
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="ruleForm.demandDescription"
              style="width: 980px">
            </el-input>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-10">
          <el-form-item label="验收标准" prop="check_criterion">
            <label slot="label">&nbsp;&nbsp;&nbsp;验收标准</label>
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="ruleForm.checkCriterion"
              style="width: 980px">
            </el-input>
          </el-form-item>
        </el-form>

        <el-form class="demo-ruleForm-11">
          <el-button @click="submitForm" type="primary">提交</el-button>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: "Change",
  data() {
    return {
      ruleForm: {
        bgContract: '',
        bgProject: '',
        stageNum: '',
        demandSource: '',
        sourceRemark: '',
        privilege: '',
        demandName: '',
        planTime: '',
        demandDescription: '',
        checkCriterion: '',
        copyGroup: '',
        PR: '',
        radio: '',
        ifCheck: 0,
        proposeTime: null,
        ifNew: 1,
        choice: 1,
        contractAffected: 0,
        demandIncrease: 0,
        communicated: 0,
        checkAffected: 0
      },
      contact_data: [],
      project_data: [],
      rules: {
        bgContract: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        bgProject: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandSource: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        planTime: [
          {type: 'number'}
        ],
        privilege: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandName: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandDescription: [
          {required: true, message: '请选择', trigger: 'change'}
        ]
      },
    }
  },
  props: {
    projectName: String,
    demandName: String,
    contractName: String,
    demand: Object
  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.ruleForm.bgProject = this.projectName
      this.ruleForm.bgContract = this.contractName
      this.ruleForm.demandName = this.demandName
      this.ruleForm.proposeTime = this.getCurrentTime()
      this.ruleForm.isCheck = 1
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(_this.ruleForm)
          axios.post(this.$store.state.URL + '/AlterDemand/alterDemand', qs.stringify(this.ruleForm)).then(function (resp) {
            if (resp.data === 'success')
              alert('更新成功')
            _this.closeDialog()
          })
        } else {
          console.log('添加失败');
          return false;
        }
      });
    },
    closeDialog() {
      this.$emit("closeUpdateDialog")
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getEditorData() {
      let data = this.editor.txt.html()
      alert(data)
    },
    getCurrentTime() {
      let date = new Date();//当前时间
      let month = this.zeroFill(date.getMonth() + 1);//月
      let day = this.zeroFill(date.getDate());//日
      let hour = this.zeroFill(date.getHours());//时
      let minute = this.zeroFill(date.getMinutes());//分
      let second = this.zeroFill(date.getSeconds());//秒

      //当前时间
      let curTime = date.getFullYear() + "-" + month + "-" + day
        + " " + hour + ":" + minute + ":" + second;

      return curTime;
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
  }
}
</script>

<style scoped>
.demo-ruleForm-1 {
  position: absolute;
  left: 100px;
}

.demo-ruleForm-2 {
  position: absolute;
  left: 100px;
  top: 155px;
}

.demo-ruleForm-3 {
  position: absolute;
  left: 115px;
  top: 210px;
}

.demo-ruleForm-4 {
  position: absolute;
  left: 100px;
  top: 270px;
}

.upload-demo {
  position: absolute;
  left: 130px;
  top: 330px;
}

.demo-ruleForm-5 {
  position: absolute;
  left: 100px;
  top: 390px;
}

.demo-ruleForm-6 {
  position: absolute;
  left: 100px;
  top: 450px;
}

.demo-ruleForm-7 {
  position: absolute;
  left: 110px;
  top: 510px;
}

.demo-ruleForm-8 {
  position: absolute;
  left: 110px;
  top: 570px;
}

.demo-ruleForm-9 {
  position: absolute;
  left: 100px;
  top: 630px;
}

.demo-ruleForm-10 {
  position: absolute;
  left: 100px;
  top: 990px;
}

.demo-ruleForm-11 {
  position: absolute;
  left: 600px;
  top: 1380px;
}

.change {
  top: 10%;
  height: 1400px;
  width: 100%;
}
</style>
